<!DOCTYPE html>
<html lang='en'>

<head>
    <meta charset='UTF-8'>
    <meta http-equiv='X-UA-Compatible' content='IE=edge'>
    <meta name='viewport' content='width=device-width, initial-scale=1.0'>
    <title>Document</title>
    <style>
        @import "compass/css3";

        html {
            background: #222;
        }

        .container {
            width: 500px;
            margin: 10px auto;
            border: 1px solid #333;
            height: 280px;
            background: #111;
            overflow: hidden;
        }

        .unit {
            float: left;
            width: 249px;
            height: 280px;
            background-color: #222426;
            @include filter-gradient(#222426, #111111, horizontal);
            @include background-image(radial-gradient(center, ellipse cover, #222426 0%, #111111 100%));

            &:first-child {
                border-right: 1px solid #333;
            }
        }

        .overlay {
            position: absolute;
            background-image: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/28963/grain.png");
            top: 10px;
            width: 500px;
            height: 280px;
            left: 50%;
            margin-left: -250px;
            z-index: 1000;
            opacity: 0.11;
            animation: filmgrain 0.4s steps(3) infinite;
        }

        .ball {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            background-color: #959595; // Old browsers
            @include filter-gradient(#959595, #494949, horizontal); // IE6-9 fallback on horizontal gradient
            @include background-image(radial-gradient(center, ellipse cover, #959595 0%, #4e4e4e 79%, #494949 100%));
            transform: translateZ(0);
            margin: 30px auto;
            position: relative;
            z-index: 300;
        }

        .ball-shadow {
            position: absolute;
            width: 50px;
            height: 5px;
            border-radius: 50%;
            background: #000;
            top: 280px;
            margin-left: 100px;
            z-index: 2;
            opacity: 0;
            box-shadow: 0 0 10px 5px rgba(0, 0, 0, 0.2);
            animation: boom 1.6s 0.7s ease-in-out infinite;
        }

        @keyframes boom {
            50% {
                opacity: 0.8;
            }
        }

        @keyframes filmgrain {
            100% {
                background-position: 200% 0%;
            }
        }
    </style>
    <script src='./vue.global.js'></script>
    <script src='./gsap.min.js'></script>
    <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.8.0/gsap.min.js"></script> -->
</head>

<body>
    <div class='container'>
        <div class='unit'>
            <div class='ball ball1'></div>
            <div class='ball-shadow'></div>
        </div>
        <div class='unit'>
            <div class='ball ball2'></div>
            <div class='ball-shadow'></div>
        </div>
    </div>
    <div class='overlay'></div>

    <script type="module">

        // import { gsap, Power4, Circ } from './node_modules/gsap/all.js'

        const ball1 = document.querySelector('.ball1')
        const ball2 = document.querySelector('.ball2')

        gsap.from(ball1, {
            duration: 0.8,
            y: 220,
            repeat: -1,
            yoyo: true,
            ease: Power4.easeOut
        });
        gsap.from(ball2, {
            duration: 0.8,
            y: 225,
            repeat: -1,
            yoyo: true,
            ease: Circ.easeOut
        });
        gsap.fromTo(ball2, {
            duration: 0.8,
            scaleY: 1
        }, {
            scaleY: 1.1,
            repeat: -1,
            yoyo: true,
            ease: Circ.easeOut
        });
    </script>
</body>

</html>